<template>
  <el-dialog title="添加文章" :visible.sync="showDialog" width="40%">
    <!--------------------- 表格 --------------------->
    <el-form
      v-if="showDialog"
      :model="formData"
      :rules="formRules"
      ref="form"
      label-width="140px"
    >
      <el-form-item label="文章标题" prop="title">
        <el-input
          v-model="formData.title"
          placeholder="请根据文章标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章标题" prop="articleBody">
        <template>
          <vue-editor v-model="formData.articleBody" />
        </template>
      </el-form-item>

      <el-form-item label="视频地址" prop="videoURL">
        <el-input v-model="formData.videoURL"></el-input>
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="center">
      <el-button @click="showDialog = false">取消</el-button>
      <el-button type="primary" @click="btnOk">确定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { addArticlesApi } from "@/api/articles";
export default {
  data() {
    return {
      showDialog: false,
      formData: {
        title: "",
        videoURL: "",
        articleBody: "",
      },
      formRules: {
        title: [{ required: true, message: "请输入", trigger: "blur" }],
        articleBody: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  methods: {
    async btnOk() {
      try {
        await this.$refs.form.validate();
      } catch (error) {
        return console.log(error);
      }
      await addArticlesApi(this.formData);
      this.$message.success("新增成功");
      this.formData = ''
      this.showDialog = false;
      this.$emit("updateList");
    },
  },
};
</script>

<style lang='scss' scoped>
  // 弹窗信息
  ::v-deep .el-dialog__header {
    background: #66b1ff;
  
    .el-icon-close:before {
      color: #fff;
    }
  
    .el-dialog__title {
      color: #fff;
    }
  
  }
</style>
